<script setup>
import ExampleCard from "../Components/ExampleCard.vue";
import MaterialBadge from "@/components/MaterialBadge.vue";
import MaterialAlert from "@/components/MaterialAlert.vue";
import RotatingCard from "../Components/RotatingCard.vue";
import RotatingCardFront from "../Components/RotatingCardFront.vue";
import RotatingCardBack from "../Components/RotatingCardBack.vue";

defineProps({
    data: {
        type: Array,
        required: true,
        heading: {
            type: Array,
            required: true,
        },
        description: {
            type: String,
            required: true,
        },
        items: {
            type: Array,
            required: true,
            image: {
                type: String,
                required: true,
            },
            title: {
                type: String,
                required: true,
            },
            subtitle: {
                type: String,
                required: true,
            },
        },
    },
    headData: {
        type: Object,
        required: true,
        leftText: String,
        rightText1: String,
        rightText2: String,
        rightText3: String,
    },
    col1: {
        type: String,
        default: "col-lg-3",
    },
    col2: {
        type: String,
        default: "col-lg-9",
    },
});
</script>
<script>
export default {
    inheritAttrs: false,
};
</script>
<template>
    <section class="my-5 py-5">
        <div class="container">
            <div class="row">
                <div class="row justify-content-center text-center my-sm-5">
                    <div class="col-lg-8">
                        <!-- <MaterialBadge color="success" class="mb-3">Infinite combinations</MaterialBadge> -->

                        <h2 class="text-dark mb-0">{{ headData.leftText }}</h2>
                        <!-- <p class="lead">We have created multiple options for you to put together and customise into pixel perfect pages.</p> -->
                    </div>
                    <div class="col-lg-4">
                        <MaterialAlert color="info" fontWeight="bold"> {{ headData.rightText1 }} </MaterialAlert>
                        <MaterialAlert color="info" fontWeight="bold"> {{ headData.rightText2 }} </MaterialAlert>
                        <MaterialAlert color="info" fontWeight="bold"> {{ headData.rightText3 }} </MaterialAlert>
                    </div>
                </div>
            </div>
        </div>
        <div class="container mt-sm-5 mt-3">
            <div v-for="({ heading, description, items }, index) in data" :class="`row ${index != 0 && index != -1 ? 'pt-lg-6' : ''}`" :key="heading">
                <div class="col-lg-6">
                    <div class="position-sticky pb-lg-5 pb-3 mt-lg-0 mt-5 ps-2" style="top: 100px">
                        <h3>{{ heading }}</h3>
                        <h6 v-for="(desc, indexs) in description" :key="indexs" class="text-secondary font-weight-normal pe-3 d-flex align-items-center"><i class="material-icons me-1">check_circle_outline</i>{{ desc }}</h6>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div :class="`row mb-3`" v-for="{ image, title, subtitle, route, pro, action, description } in items" :key="title">
                        <div class="col-md-12 mt-md-0">
                            <RotatingCard>
                                <RotatingCardFront :image="image" :title="title" />
                                <RotatingCardBack :image="image" :title="subtitle" :description="subtitle" :action="action" />
                            </RotatingCard>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</template>
